<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>2345网咖 - 购物</title>
    <style type="text/css">
        body {
            background-image: url('https://img.zcool.cn/community/0116bb5d4bcb2ca80120695cdaa257.jpg@1280w_1l_2o_100sh.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景色 */
            border-radius: 10px;
            text-align: center;
            color: black; /* 设置文本颜色为黑色 */
        }
        h1 {
            margin-top: 0;
        }
        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .product {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }
        .product img {
            max-width: 100px;
            height: auto;
        }
        .logout-button {
            text-align: center;
            margin-top: 20px;
        }
        nav {
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景色 */
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>

<nav>
    <a href="User%20Center.jsp">首页</a>
    <a href="profile.html">个人资料</a>
    <a href="settings.html">设置</a>
    <a href="shopping.jsp">购物</a>
</nav>

<div class="container">
    <h1>2345网咖 - 购物</h1>
    <div class="product-list">
        <div class="product">
            <img src="https://img.zcool.cn/community/017483591da785b5b3086ed4904903.jpg@1280w_1l_2o_100sh.jpg" alt="可乐">
            <h3>可乐</h3>
            <p>价格: $3.5</p>
            <button onclick="addToCart('可乐')">加入购物车</button>
        </div>
        <div class="product">
            <img src="https://image3.suning.cn/b2c/catentries/000000000109741566_5_800x800.jpg" alt="红牛">
            <h3>红牛</h3>
            <p>价格: $6</p>
            <button onclick="addToCart('红牛')">加入购物车</button>
        </div>
        <div class="product">
            <img src="https://gd4.alicdn.com/imgextra/i4/2209031382354/O1CN01uospSu1TGAzPzQOAu_!!2209031382354.jpg" alt="烤肠">
            <h3>烤肠</h3>
            <p>价格: $5</p>
            <button onclick="addToCart('烤肠')">加入购物车</button>
        </div>
        <div class="product">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.57a91f79d0887453c9ab8b9770476108?rik=sWvc9t6rsREoDg&riu=http%3a%2f%2fimg5.21food.cn%2fimg%2falbum%2f2017%2f9%2f11%2ffood13489251541011LW.jpg&ehk=ZWO1%2b%2bQtwTs%2bvh4wb%2fdxpTfJRes0oXuulXovPF6iDm8%3d&risl=&pid=ImgRaw&r=0" alt="Product 4">
            <h3>泡面</h3>
            <p>价格: $5</p>
            <button onclick="addToCart('泡面')">加入购物车</button>
        </div>
    </div>
    <div class="back-button">
        <button onclick="window.location.href='User Center.jsp'">返回用户中心</button>
    </div>

</div>

<script type="text/javascript">
    //<![CDATA[
    function addToCart(product) {
        // 添加到购物车逻辑
        alert("已将 " + product + " 加入购物车");
    }
    //]]>
</script>
</body>
</html>
